import React from "react";
import { Button as AntdButton, ButtonProps } from "../../antd/index";
import cx from "classnames";
import { EditIcon, DeleteIcon } from "../Svg";
import "./style/index";

export type AntdButtonProps = Omit<ButtonProps, "icon">;
export type Type = "primary" | "default" | "text" | "link";
export type IconType = "edit" | "delete";

export interface Props extends AntdButtonProps {
  type?: Type;
  icon?: IconType;
  children?: any;
}

const icons: {
  [key in IconType]: () => JSX.Element;
} = {
  edit: EditIcon,
  delete: DeleteIcon,
};
function Button(props: Props) {
  const { type = "default", icon } = props;
  const antdProps = {
    ...props,
    type: icon ? "text" : type,
    icon: null,
  };
  return (
    <AntdButton {...antdProps} className={cx({ "ant-btn-icon": !!icon })}>
      {icon ? icons[icon]() : props.children}
    </AntdButton>
  );
}

export default Button;
